<template>
    <view class="container">
        <!-- 自定义导航栏 -->
        <custom-navbar :showTitle="true" title="会员等级" :isCoverNav="false" backgroundColor="#ffffff" textColor="#333333" :showBack="true"></custom-navbar>
        
        <!-- 会员等级轮播 -->
        <view class="vip-swiper-section">
            <up-swiper 
                :list="vipLevels" 
                previousMargin="30" 
                nextMargin="30" 
                :autoplay="false" 
                radius="5" 
                bgColor="#ffffff"
                @change="onSwiperChange"
                height="300rpx"
            ></up-swiper>
        </view>
        
        <!-- 当前会员权益 -->
        <view class="benefits-section">
            <view class="section-title">会员权益</view>
            <view class="benefits-list">
                <view v-for="(benefit, index) in currentVipBenefits" :key="index" class="benefit-item">
                    <view class="benefit-icon">
                        <u-icon :name="benefit.icon" size="40" :color="benefit.color"></u-icon>
                    </view>
                    <view class="benefit-content">
                        <view class="benefit-title">{{ benefit.title }}</view>
                        <view class="benefit-desc">{{ benefit.description }}</view>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 会员规则 -->
        <view class="rules-section">
            <view class="section-title">会员规则</view>
            <view class="rules-content">
                <view v-for="(rule, index) in vipRules" :key="index" class="rule-item">
                    <view class="rule-number">{{ index + 1 }}</view>
                    <view class="rule-text">{{ rule }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import customNavbar from '../../components/custom-navbar/index.vue'

// 类型定义
interface LoadOptions {
  [key: string]: any
}

interface ShareResult {
  title?: string
  path?: string
}

interface VipLevel {
  id: number
  name: string
  level: string
  color: string
  bgGradient: string
  currentOrders: number
  requiredOrders: number
  progress: number
  image?: string
}

interface VipBenefit {
  icon: string
  color: string
  title: string
  description: string
}

interface VipLevelBenefits {
  [key: number]: VipBenefit[]
}

// 响应式数据
const currentVipIndex = ref<number>(0)
const userCurrentOrders = ref<number>(3) // 用户当前订房次数

// 会员等级原始数据
const vipLevelsData = ref<VipLevel[]>([
  {
    id: 1,
    name: '青铜会员',
    level: 'Bronze',
    color: '#CD7F32',
    bgGradient: 'linear-gradient(135deg, #CD7F32 0%, #B8860B 100%)',
    currentOrders: Math.min(userCurrentOrders.value, 5),
    requiredOrders: 5,
    progress: Math.min(userCurrentOrders.value / 5 * 100, 100),
    image: 'https://image.shengxuankj.com/fronts/VIP1.png'
  },
  {
    id: 2,
    name: '白银会员',
    level: 'Silver',
    color: '#C0C0C0',
    bgGradient: 'linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%)',
    currentOrders: Math.max(0, Math.min(userCurrentOrders.value - 5, 10)),
    requiredOrders: 10,
    progress: userCurrentOrders.value > 5 ? Math.min((userCurrentOrders.value - 5) / 10 * 100, 100) : 0,
    image: 'https://image.shengxuankj.com/fronts/VIP2.png'
  },
  {
    id: 3,
    name: '黄金会员',
    level: 'Gold',
    color: '#FFD700',
    bgGradient: 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)',
    currentOrders: Math.max(0, userCurrentOrders.value - 15),
    requiredOrders: 999,
    progress: userCurrentOrders.value > 15 ? 100 : 0,
    image: 'https://image.shengxuankj.com/fronts/VIP3.png'
  }
])

// 转换为轮播组件需要的格式
const vipLevels = computed(() => {
  return vipLevelsData.value.map(level => level.image)
})

// 会员权益数据
const vipBenefitsData: VipLevelBenefits = {
  1: [ // 青铜会员
    { icon: 'gift', color: '#CD7F32', title: '9.5折优惠', description: '享受房费9.5折优惠' },
    { icon: 'clock', color: '#CD7F32', title: '延迟退房', description: '免费延迟退房至14:00' },
    { icon: 'star', color: '#CD7F32', title: '积分奖励', description: '消费积分1.2倍奖励' }
  ],
  2: [ // 白银会员
    { icon: 'gift', color: '#C0C0C0', title: '9折优惠', description: '享受房费9折优惠' },
    { icon: 'clock', color: '#C0C0C0', title: '延迟退房', description: '免费延迟退房至15:00' },
    { icon: 'star', color: '#C0C0C0', title: '积分奖励', description: '消费积分1.5倍奖励' },
    { icon: 'home', color: '#C0C0C0', title: '免费换房', description: '每月1次免费换房机会' },
    { icon: 'coffee', color: '#C0C0C0', title: '免费早餐', description: '入住期间免费早餐' }
  ],
  3: [ // 黄金会员
    { icon: 'gift', color: '#FFD700', title: '8.5折优惠', description: '享受房费8.5折优惠' },
    { icon: 'clock', color: '#FFD700', title: '延迟退房', description: '免费延迟退房至16:00' },
    { icon: 'star', color: '#FFD700', title: '积分奖励', description: '消费积分2倍奖励' },
    { icon: 'home', color: '#FFD700', title: '免费换房', description: '每月3次免费换房机会' },
    { icon: 'coffee', color: '#FFD700', title: '免费早餐', description: '入住期间免费早餐' },
    { icon: 'car', color: '#FFD700', title: '接送服务', description: '免费机场接送服务' },
    { icon: 'phone', color: '#FFD700', title: '专属客服', description: '24小时专属客服服务' }
  ]
}

// 会员规则
const vipRules = ref<string[]>([
  '会员等级根据累计订房次数确定，青铜会员需5次，白银会员需15次，黄金会员需25次以上',
  '会员权益自获得等级之日起生效，有效期为一年，到期后需重新累计订房次数',
  '会员折扣不与其他优惠活动叠加使用，以最优惠价格为准',
  '免费换房服务需提前24小时申请，且仅限同等级或以下房型',
  '免费早餐服务仅限酒店内餐厅，不包含客房送餐服务',
  '积分奖励将在订单完成后3个工作日内到账',
  '会员权益解释权归酒店所有，如有变动将提前通知'
])

// 计算当前显示的会员权益
const currentVipBenefits = computed(() => {
  const currentLevel = vipLevelsData.value[currentVipIndex.value]
  return vipBenefitsData[currentVipIndex.value + 1] || []
})

// 轮播切换事件
const onSwiperChange = (index: number): void => {
  currentVipIndex.value = index
}

// 生命周期函数--监听页面加载
const onPageLoad = (options: LoadOptions): void => {
  // 页面加载逻辑
}

// 生命周期函数--监听页面初次渲染完成
const onPageReady = (): void => {
  // 页面渲染完成逻辑
}

// 生命周期函数--监听页面显示
const onPageShow = (): void => {
  // 页面显示逻辑
}

// 生命周期函数--监听页面隐藏
const onPageHide = (): void => {
  // 页面隐藏逻辑
}

// 生命周期函数--监听页面卸载
const onPageUnload = (): void => {
  // 页面卸载逻辑
}

// 页面相关事件处理函数--监听用户下拉动作
const onPagePullDownRefresh = (): void => {
  // 下拉刷新逻辑
}

// 页面上拉触底事件的处理函数
const onPageReachBottom = (): void => {
  // 上拉触底逻辑
}

// 用户点击右上角分享
const onPageShareAppMessage = (): ShareResult => {
  return {
    title: '',
    path: ''
  }
}

// 页面挂载时执行
onMounted(() => {
  onPageLoad({})
})

// 暴露变量和方法
defineExpose({
  currentVipIndex,
  userCurrentOrders,
  vipLevelsData,
  vipLevels,
  vipRules,
  currentVipBenefits,
  onSwiperChange,
  onPageLoad,
  onPageReady,
  onPageShow,
  onPageHide,
  onPageUnload,
  onPagePullDownRefresh,
  onPageReachBottom,
  onPageShareAppMessage
})
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 轮播区域 */
.vip-swiper-section {
  padding: 40rpx 0;
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  background-color: #ffffff;
}

/* 权益区域 */
.benefits-section {
  background-color: #ffffff;
  margin: 20rpx 30rpx;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 30rpx;
  text-align: center;
}

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.benefit-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #f8f9fa;
  border-radius: 16rpx;
  border-left: 8rpx solid #667eea;
}

.benefit-icon {
  margin-right: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80rpx;
  height: 80rpx;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.benefit-content {
  flex: 1;
}

.benefit-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 8rpx;
}

.benefit-desc {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.4;
}

/* 规则区域 */
.rules-section {
  background-color: #ffffff;
  margin: 20rpx 30rpx 40rpx;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
}

.rules-content {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.rule-item {
  display: flex;
  align-items: flex-start;
  padding: 20rpx 0;
}

.rule-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rpx;
  height: 40rpx;
  background-color: #667eea;
  color: #ffffff;
  border-radius: 50%;
  font-size: 24rpx;
  font-weight: bold;
  margin-right: 20rpx;
  flex-shrink: 0;
  margin-top: 4rpx;
}

.rule-text {
  flex: 1;
  font-size: 28rpx;
  color: #666666;
  line-height: 1.6;
}
</style>
